<!-- 课程详情页面 -->

<template>
	<focus-body mode="auto">
		
		<!-- ===================================================== 实占层 -->
		<!-- 视频播放器块 -->
		<focus-box width="750">
			<!-- 通知公告栏占位 -->
			<focus-box 
				width="750" 
				height="60"
			></focus-box>
			<!-- 视频播放器占位容器 -->
			<focus-box 
				width="750" 
				height="422"
			></focus-box>
			<!-- 课程名称 -->
			<focus-box 
				mode="col" 
				width="750" 
				align="start"
				justify="start" 
				:padding="[30,32]"
				position="relative"
			>
				<!-- 名称文字 -->
				<focus-text 
					size="30" 
					color="content" 
					:text="info.name" 
					lines="2"
				></focus-text>
				<!-- 绝对定位内容蒙层 -->
				<view style="position:absolute; left:0; right:0; top:0; bottom:0; background-color:#F4F6F8;"></view>
			</focus-box>
			<!-- 间隔区间 -->
			<focus-box 
				width="750" 
				height="8"
			></focus-box>
		</focus-box>
		
		<!-- 章列表组件 -->
		<list-chapter 
			ref="myListChapterDjy"
			:send="send"
			:isplaying="state.isPlayNow"
			@basicinfo="listBasicinfoCall"
			@change="listChangeCall"
		></list-chapter>
		
		
		<!-- ===================================================== 悬浮层 -->
		<!-- 视频播放器块 -->
		<focus-box 
			top="0" 
			left="0" 
			index="3x"
			width="750" 
			position="fixed" 
		>
			<!-- 视频播放器占位容器 -->
			<focus-box 
				bg="black" 
				width="750" 
				height="422" 
				position="relative"
			>
				<!-- 视频播放器组件 -->
				<video-public
					:src="videoConf.src"
					:jump="videoConf.jump"
					:openplay="videoConf.openplay"
					:openlegal="videoConf.openlegal"
					@play="onPlay" 
					@pause="onPause" 
					@ended="onEnded"
					@initEnd="onInitEnd"
					@timeupdate="onTimeupdate"
					@segmentupdate="onSegmentupdate"
					@controlstoggle="onControlstoggle"
				>
					<!-- 左上角定位容器 -->
					<focus-box 
						top="20" 
						left="20" 
						index="2x"
						position="absolute" 
					>
						<!-- 视频观看人脸对比 -->
						<!-- <face-than 
							ref="myFaceThanDjy"
							:enable="state.isOpenFace"
							:courseid="send.courseId"
							:jieid="send.jieId"
							:progress="videoView.progress"
						></face-than> -->
					</focus-box>
				</video-public>
				<!-- 右上角定位容器 -->
				<view
					v-if="articulationVisble && initEnd"
					style="
						width: 96rpx;
						height: 40rpx;
						top: 20rpx;
						z-index: 30;
						right: 20rpx;
						color: #FFFFFF;
						font-size: 22rpx;
						border: 1px solid #FFFFFF;
						position: absolute;
						box-sizing: border-box;
						background: rgba(0, 0, 0, 0.4);
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 6rpx;
					"
					@click="onSetArticulation()"
				>
					{{currentArticulation === 'FD'? '流畅' : '标清'}}
				</view>
				<view
					v-if="changeArticulation"
					style="
						top: 80rpx;
						right: 20rpx;
						color: #FFFFFF;
						z-index: 30;
						font-size: 24rpx;
						position: absolute;
					"
				>
					<view
						:style="{
							width: '96rpx',
							height: '72rpx',
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'center',
							borderTopLeftRadius: '6rpx',
							borderTopRightRadius: '6rpx',
							background: currentArticulation === 'FD' ? 'rgba(0, 0, 0, 0.5)': 'rgba(0, 0, 0, 0.4)'
						}"
						@click="onArticulationChange('FD')"
					>
						流畅
					</view>
					<view
						:style="{
							width: '96rpx',
							height: '72rpx',
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'center',
							borderBottomLeftRadius: '6rpx',
							borderBottomRightRadius: '6rpx',
							background: currentArticulation === 'LD' ? 'rgba(0, 0, 0, 0.5)': 'rgba(0, 0, 0, 0.4)'
						}"
						@click="onArticulationChange('LD')"
					>
						标清
					</view>
				</view>
			</focus-box>
			<!-- 课程名称 -->
			<focus-box width="750" :padding="[30,32]"
			mode="col" justify="start" align="start"
			bg="white">
				<!-- 名称文字 -->
				<focus-text size="30" color="content" weight="bold" :text="info.name" lines="2"></focus-text>
			</focus-box>
			<!-- 间隔区间 -->
			<focus-line length="750" color="info-light"></focus-line>
		</focus-box>
		<!-- ===================================================== 弹出层 -->
		<!-- 通用信息模态框 -->
		<modalInfo 
			ref="myModalInfoDjy"
			mode="primary"
			title="课后练习"
			content="课后练习全部答对，就能获得此小节的学分哦~"
			tips="温馨提示：认真学课就能答对题目"
			cancelText="暂不做题"
			confirmText="立即做题"
			@confirm="modalConfirmClick"
		></modalInfo>
		
		
	</focus-body>
</template>

<script>
	// 接口请求文件
	import request from '@/pagesB/common/js/request/course.js'; // 课程信息 相关接口
	// 组件引入
	import listChapter from './element/list-chapter/list-chapter.vue'; // 章节列表
	// import faceThan from './element/face-than/face-than.vue'; // 视频观看人脸对比
	import videoPublic from '@/pagesB/components/video-public/video-public.vue'; // 播放器
	import modalInfo from '@/pagesB/components/modal-info/modal-info.vue'
	
	/**
	 * 课程详情页面
	 * @description 以下为页面url传参
	 * @property {String,Number} courseId 课程ID
	 * @property {String,Number} jieId 小节ID
	 */
	export default {
		
		// 组件定义
		components: {
			// noticeScrolling,
			listChapter,
			videoPublic,
			// faceThan,
			modalInfo
		},
		
		// 页面数据
		data() {
			return {
				// 片头是否播放完成
				initEnd: false,
				// 清晰度切换按钮展示隐藏
				articulationVisble: false,
				// 当前清晰度
				currentArticulation: 'FD',
				changeArticulation: false,
				// 页面传递参数
				send: {
					courseId: 0, // 课程id
					jieId: 0, // 小节ID
					over: false, // 是否接收完毕
				},
				
				// 状态信息
				state: {
					isFirstShow: true, // 是否第一次显示页面
					isPlayNow: false, // 播放器是否正在播放状态
					isOpenFace: true, // 是否启用人脸对比功能
				},
				
				// 播放器配置信息
				videoConf: {
					src: '', // 视频资源地址
					jump: 20, // 初始要跳转到的秒数
					openplay: true, // 是否开启播放功能
					openlegal: true, // 是否检测观看合法性
				},
				// 播放器实时播放信息
				videoView: {
					/* currentTime: 4,
					duration: 660,
					progress: 0, */
				},
				// 课程基本信息
				info: {
					name: '', // 课程名称
					isMust: 0, // 必修/选修
				},
				// 选中的小节信息
				section: {},
				requestBool:true,
				updataJiePeogressBool:false
			}
		},
		
		// 页面加载完成
		onLoad(options) {
			// 页面传参 赋值
			this.send = Object.assign(this.send, options);
			// 接收完毕标识
			this.send.over = true;
			// 云函数：百度平台鉴权
			// uniCloud.callFunction({
			// 	name: 'token_baidu', // 你的云函数名称
			// 	data: {
			// 		type: 'face', // 人脸识别的鉴权
			// 	},
			// 	success: (res) => {
			// 		// 将存在的token放入临时缓存
			// 		uni.$focus.varShortTime('set', {
			// 			"baidu_access_token_face": res.result.data.access_token
			// 		});
			// 	}
			// });
			uni.$on('changeJieId',(id) => this.send.jieId = id )
		},
		
		// 页面显示
		onShow() {
			// 如果是第一次进入
			if (this.state.isFirstShow == true){
				// 改变状态为“非”
				this.state.isFirstShow = false;
			}
			// 如果是第二次进入
			else {
				// 刷新章节列表数据
				if(this.send.type || this.send.item_type){
					this.$refs.myListChapterDjy.chapterListReq(1);
				}else{
					this.$refs.myListChapterDjy.chapterListReq();
				}
			}
		},
		
		// 页面销毁
		onUnload() {
			// 视频观看进度更新
			uni.$off("changeJieId")
			// this.videoProgressSetReq();
			
			
			// 弹框
			// uni.$off('myModalInfoDjy')
		},
		
		// 分享到聊天
		onShareAppMessage() {},
		
		// 页面事件
		methods: {
			// 进度条显示隐藏
			onControlstoggle(e){
				// 事件回调
				this.changeArticulation = false
				this.articulationVisble = e
			},
			
			// 片头播放完成
			onInitEnd(e){
				this.initEnd = true
			},
			onSetArticulation() {
				this.changeArticulation = true
			},
			
			onArticulationChange(type){
				this.currentArticulation = type
				this.videoConf.src = `${this.videoConf.articulationList.find(i=> i.Definition === type).PlayURL} || 1212`;
				this.videoConf.jump = this.videoView.currentTime
				this.changeArticulation = false
			},
			
			// ========================================= 数据处理
			// 播放器配置信息初始化
			initVideoConf() {
				// 状态信息 赋值
				this.state.isPlayNow = false;
				// 配置数据 赋值
				this.videoConf.src = '';
				this.videoConf.jump = 0;
				this.videoConf.openplay = true;
				this.videoConf.openlegal = true;
			},
			
			
			// ========================================= 元素事件
			// 课程基本信息 回调
			listBasicinfoCall(objD) {
				// 基本信息 赋值
				this.info = objD.info;
			},
			
			// 切换选中小节 回调
			listChangeCall(objD) {				
				console.log("当前播放的视频信息：", objD)
				// 1. 如果是播放器重置操作
				if (objD.type == 'reset'){	
					// 播放器配置信息初始化
					this.initVideoConf();
					// 人脸对比组件初始化
					// this.$refs.myFaceThanDjy.initData();
				}
				// 2. 小节视频信息赋值
				else if (objD.type == 'video'){
					// 选中的小节信息 赋值
					this.section = objD.jieInfo;
					// 播放器配置信息 赋值
					this.videoConf = objD.video;
					this.currentArticulation = objD.video.articulationList[0].Definition
					this.changeArticulation = false
					this.initEnd = false
					
					
					// 如果视频已经看完                  // 关闭人脸对比
					// if (this.section.baifen >= 100) { this.state.isOpenFace = false; }
					// 如果视频未看完，开启人脸对比
					// else { this.state.isOpenFace = true; }
				}		
			},
			
			// 播放器播放触发
			onPlay(objD) {
				// 正在播放状态 赋值
				this.state.isPlayNow = true;
			},
			// 播放器暂停触发
			onPause(objD) {
				// 停止播放状态 赋值
				this.state.isPlayNow = false;
				// 视频观看进度更新
				// this.videoProgressSetReq();
			},
			// 播放器放完结束触发
			onEnded(objD) {
				// 停止播放状态 赋值
				this.state.isPlayNow = false;
				// 播放器实时播放信息 赋值
				this.videoView = objD.detail;
				// 视频观看进度更新
				this.videoProgressSetReq(() =>{ 
				//弹框
				// uni.$on('myModalInfoDjy',() => {
				// 	if (this.section.isHaveQuestion == true && this.section.status_exam != 2){
				// 		// 弹出课后考试题弹框
				// 		this.$refs.myModalInfoDjy.open();
				// 	}
				// })
				
				// 刷新章节列表
				if(this.send.type || this.send.item_type){
					this.$refs.myListChapterDjy.chapterListReq('1');
				}else{
					this.$refs.myListChapterDjy.chapterListReq();
				}
				});
				// 如果小节有课后考试题 并且 还未做过题
				if (this.section.isHaveQuestion == true && this.section.status_exam != 2){
					// 弹出课后考试题弹框
					this.$refs.myModalInfoDjy.open();
				}
				
			},
			// 播放器进度实时回调
			onTimeupdate(objD) {
				// 播放器实时播放信息 赋值
				this.videoView = objD.detail;
				// 更新播放进度到章节列表组件  这里因为播放器会从0瞬间跳到  当前播放时间  如果切换太快数据有误  这里延迟一下
				if(!this.updataJiePeogressBool){
					setTimeout(()=>{
						this.updataJiePeogressBool = true
					},1500)
				}
				this.updataJiePeogressBool && this.$refs.myListChapterDjy.updataJiePeogress(Number(this.videoView.progress))
				if(this.requestBool){
					this.requestBool = false
					setTimeout(()=>this.requestBool = true,5000)
					this.videoProgressSetReq();
				}
			},
			// 分段更新到达
			onSegmentupdate(objD) {
				// 视频观看进度更新
				// this.videoProgressSetReq();
			},
			
			// 考试弹出框“确定” 点击
			modalConfirmClick(objD) {
				console.log('------------123')
				// 跳转到考试页面
				uni.$focus.pageJump('/pagesB/pages/question/test/index', {
					courseId: this.section.courseId, // 课程id
					jieId: this.section.jieId, // 小节id
					cert_id: this.send.cert_id,//证书id
					term_id: this.send.term_id,//周期id
					item_type: this.send.item_type,//学习类型
				});
			},
			
			
			// ========================================= 接口请求
			// 视频观看进度更新
			videoProgressSetReq(callBack) {
				request.videoProgressSet({
					data: {
						teach_course_info_id: this.section.courseId, // 课程id
						teach_course_id: this.section.zhangId, // 章id
						teach_chapter_id: this.section.jieId, // 小节id
						is_must: this.info.isMust, // 是否必修
						number: this.section.number, // 小节编号
						baifen: this.videoView.progress, // 进度 例如 （10 20） 100代表已看完
						second: this.videoView.currentTime, // 已经观看的秒数
						cert_id: this.send.cert_id,//证书id
						term_id: this.send.term_id,//周期id
						item_type:this.send.item_type,//学习类型
					},
					success:() => {
						if(callBack){
							callBack()
						}
					}
				});
			},
			
		},
		
	}
</script>